<script setup lang="ts"></script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="book preserve-3d">
        <div class="book-page-box book-page-4 preserve-3d">
          <div class="book-page page-front">
            <p>第三页</p>
          </div>
        </div>
        <div class="book-page-box book-page-3">
          <div class="book-page page-front">
            <p>第二页</p>
          </div>
        </div>
        <div class="book-page-box book-page-2">
          <div class="book-page page-front">
            <p>第一页</p>
          </div>
        </div>
        <div class="book-page-box book-page-1">
          <div class="book-page page-cover">
            <p>
              翻页特效
              <br />
              flip-book
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #f1f9f9;
  .book {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    background-color: #fff;
    transform: rotateX(30deg) translateX(-50%) translateY(-50%);
    .book-page-box {
      transform-style: preserve-3d;
      transform-origin: 0 50%;
      transform: rotateY(0deg);
      .book-page {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        border: 1px solid #1976d2;
        text-align: center;
        &.page-front {
          background-color: #fff;
          p {
            font-size: 30px;
            color: #1976d2;
            margin-top: 100px;
          }
        }
        &.page-cover {
          background-color: #1976d2;
          p {
            font-size: 30px;
            color: #fff;
            margin-top: 100px;
          }
        }
      }
    }
    &:hover {
      .book-page-1 {
        animation: flipBook1 10s ease-in-out forwards;
      }
      .book-page-2 {
        animation: flipBook2 9s ease-in-out 0.5s forwards;
      }
      .book-page-3 {
        animation: flipBook3 7s ease-in-out 1.5s forwards;
      }
    }
  }
}

@keyframes flipBook1 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-160deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flipBook2 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-150deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flipBook3 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-140deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
</style>
